<template>
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>

      <el-form-item prop="hotelName">
        <el-input
          v-model="list.filter.hotelName"
          placeholder="酒店名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="roomName">
        <el-input
          v-model="list.filter.roomName"
          placeholder="房型名称"
          clearable
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="() => { $refs.listFilterRef.resetFields() }">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <!-- <auth-button
          @click="exportExcel()"
          :loading="exportListLoading"
          name="导出"
        /> -->
        <ExportExcel
          url="/sot-admin-api/hotel/meituanGoods/export"
          :param="list.filter"
        />
        <!-- <auth-button name="价格更新" type="success" @click="getList" /> -->
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index" />
      <el-table-column label="产品ID" prop="goodsId" />
      <el-table-column label="酒店名称" prop="pointName" />
      <el-table-column label="房型名称" prop="roomName" />
      <el-table-column label="床型" prop="roomBedName">
        <template slot-scope="{ row }">
          <template v-if="row.roomBedName && row.roomBedName.length > 0">
            <el-tag
              v-for="(item, index) in row.roomBedName
                .split(' ')
                .filter((it) => {
                  return it !== '';
                })"
              :key="index"
              style="margin-right: 6px"
            >
              {{ item }}
            </el-tag>
          </template>
          <template v-else>
            {{ row.roomBedName }}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="人数" prop="capacity" />
      <el-table-column label="操作" class-name="small-padding" align="center">
        <template slot-scope="{ row }">
          <auth-button
            circle
            name="日历"
            type="primary"
            @click="handleCalendar(row)"
          >
            <i class="el-icon-date"></i>
          </auth-button>
          <auth-button
            @click="
              row.id = row.goodsId;
              r(row);
            "
            name="查看"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情弹框 -->
    <detailMeiTuan :form="form"></detailMeiTuan>
    <!-- 日历弹框 -->
    <calendarMeiTuan :form="calendarTarget"></calendarMeiTuan>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pageMixin from '@/utils/pageMixin';
import useAdmateAdapter from '@/utils/useAdmateAdapter';
import detailMeiTuan from "../third-party/prices/detail/meituan";
import calendarMeiTuan from "../third-party/prices/calendar/meituan";

export default {
  computed: {
    ...mapGetters(["areaTree"]),
  },
  mixins: [pageMixin],
  components: { detailMeiTuan, calendarMeiTuan },
  filters: {
    orderStatus(index) {
      return status[index - 1] || "无";
    },
  },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/meituanGoods'
  }),
  data() {
    return {
      exportListLoading: false,
      // 日历价格弹框对象
      calendarTarget: {
        show: false,
        query: null,
        data: null,
        loading: false,
      },
    };
  },
  methods: {
    // exportExcel() {
    //   if(this.exportListLoading){
    //     return false
    //   }
    //   this.exportListLoading = true;
    //   this.$POST.download("sot-admin-api/hotel/meituanGoods/export", this.list.filter, {
    //     method: "POST",
    //   }).finally((e) => {
    //     this.exportListLoading = false;
    //   });
    // },
    handleCalendar(row) {
      this.calendarTarget.query = row;
      this.calendarTarget.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.order-dialog h2 {
  margin-top: 40px;
  &:first-child {
    margin-top: -10px;
  }
}
</style>